/
<template>
  <div class="rightBox-Remmoend">
    <ul class="titleArr" v-for="(item, index) in categoryTitleArr" :key="index">
      <li>
        <span style="display: inline-block; width: 100px">{{
          item.label
        }}</span>
        <span>total{{ item.articleCount }}articleCountTemplate</span>
      </li>
    </ul>
  </div>
</template>
<script>
import { CategoryTitle } from "../api/index";
export default {
  data() {
    return {
      categoryTitleArr: [],
    };
  },
  mounted() {
    this.getCategoryTitle();
  },
  methods: {
    async getCategoryTitle() {
      const { data } = await CategoryTitle();
      this.categoryTitleArr = data.data;
      console.log(data.data);
    },
  },
};
</script>

<style lang="scss" scoped>
.rightBox2 {
  width: 330px;
  height: 270px;
  background: var(--contentBackground);
  .titleArr li {
    color: var(--titleHcolor);
    margin: 18px 0 0 5px;
  }
  .titleArr li:hover {
    color: red;
  }
}

.remonendBox {
  animation: wrapper-gradient 2s linear;
}
.titleArr {
  animation: wrapper-gradient 2s linear;
}
@keyframes wrapper-gradient {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes img-gradient {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}
</style>
